<template>

    <section>
        <div v-if="noKey" class="Form">
            <h5 class="description">Вход в панель админуса</h5>
            
            <Password v-model="valueKey" :feedback="false" aria-describedby="password-help" @keyup.enter="enterAdmin" />
            <small id="password-help">Ваш ключ</small>
            
            <Button @click="enterAdmin" label="Войти" icon="pi pi-chevron-right" iconPos="right" />
            <p @click="toAuth">На страницу входа</p>
        </div>

        <div v-else class="adminMenu">
            <div class="dial">
                <SpeedDial :model="links" :radius="80" type="circle" />
            </div>
        </div>

        <div>
            <Dialog v-model:visible="visibleNewPasswordModal" modal header="Новый пароль для пользователя" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
            <p>UID: {{ newPasswordUserID }}</p>
            <div class="FormNewUser">
                <Password v-model="valueNewPassword" :feedback="false" aria-describedby="password-help" @keyup.enter="newPassword" toggleMask />
                <small id="password-help">Паролус</small>

                <Password v-model="valueNewPasswordMatch" :feedback="false" aria-describedby="password-help" @keyup.enter="newPassword" toggleMask />
                <small id="password-help">Повторите паролус</small>
                
                <Button @click="newPassword" label="Изменить" icon="pi pi-chevron-right" iconPos="right" />
            </div>
            </Dialog>
        </div>

        <div>
            <Dialog v-model:visible="visibleNewUserModal" modal header="Новый пользователь" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
            <div class="FormNewUser">
                <InputText type="text" v-model="valueUsername" aria-describedby="username-help" @keyup.enter="register" />
                <small id="username-help">Логинус</small>

                <Password v-model="valuePassword" :feedback="false" aria-describedby="password-help" @keyup.enter="register" toggleMask />
                <small id="password-help">Паролус</small>

                <Password v-model="valuePasswordMatch" :feedback="false" aria-describedby="password-help" @keyup.enter="register" toggleMask />
                <small id="password-help">Повторите паролус</small>
                
                <Button @click="register" label="Создать" icon="pi pi-chevron-right" iconPos="right" />
            </div>
            </Dialog>
        </div>

        <div>
            <Dialog v-model:visible="visibleUserListModal" modal header="Список пользователей" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
                <div v-for="user in allUsers" class="oneUser">
                    <h4>{{ user.username }}</h4>
                    <p>UID: {{ user.id }}</p>
                    <i @click="openVisibleNewPasswordModal(user)" v-tooltip.bottom="'Изменить пароль'" type="text" placeholder="Bottom" class="pi pi-user-edit" style="color: 'var(--primary-color)'; font-size: 1.5rem;"></i>
                    <i @click="openVisibleDeletionModal(user)" v-tooltip.bottom="'Удалить'" type="text" placeholder="Bottom" class="pi pi-user-minus" style="color: 'var(--primary-color)'; font-size: 1.5rem;"></i>
                </div>
            </Dialog>
        </div>

        <div>
            <Dialog v-model:visible="visibleGuideModal" modal header="Гайд и полезные ссылки" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
                <div>
                    <h5>Подключение к MongoDB</h5>
                    <p>Для подключения рекомендуется использовать официальное ПО Compass: <a href="https://www.mongodb.com/products/tools/compass" target="_blank">mongodb.com</a></p>
                    <h5>Сервер разработки веб-приложения (фронтенд на VueJS)</h5>
                    <p>Приложение использует инструментарий ViteJS в качестве сервера разработки для фронтенда и сборки проекта: <a href="https://vitejs.dev/" target="_blank">vitejs.dev</a></p>
                    <h5>Веб-сервер веб-приложения (бэкенд на FastAPI)</h5>
                    <p>Uvicon используется как сервер разработки, так и как боевой внутренний веб-сервер: <a href="https://www.uvicorn.org/" target="_blank">uvicorn.org</a></p>
                    <h5>Боевое развертвание в контейнерах</h5>
                    <p>Вы также можете развернуть веб-приложение локально и полноценно, заменив конфигурацию файлов nginx.conf, docker-compose.yaml: <a href="https://docs.docker.com/compose/" target="_blank">docs.docker.com</a></p>
                    <h5>Open-source репозиторий</h5>
                    <p>Проект базируется на <a href="https://gitverse.ru/internetfriend/parolus" target="_blank">GitVerse</a></p>
                </div>
            </Dialog>
        </div>

        <div>
            <Dialog v-model:visible="visibleSettingsModal" modal header="Конфигурация" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
                <div class="settingsRegister">
                    <h5>Разрешение на регистрацию пользователям</h5>
                    <div v-if="isCooldown">
                        <p>Вы сможете сменить конфигурацию: {{ remainingCooldown }} секунд</p>
                        <InputSwitch v-model="canRegister" disabled />
                    </div>
                    <div v-else>
                        <InputSwitch v-model="canRegister" />
                    </div>
                </div>
            </Dialog>
        </div>

        <div>
            <Dialog v-model:visible="visibleConfirmDelete" modal header="Вы уверены, что хотите удалить акаунт пользователя?" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
                <p>UID: {{ deletionUserID }}</p>
                <div class="confirmButtons">
                    <Button @click="closeConfirm" label="Отменить" severity="secondary" outlined />
                    <Button @click="deleteUser" label="Удалить" severity="danger" outlined />
                </div>
            </Dialog>
        </div>
    <Toast />
    </section>

</template>
<script setup>
import Password from 'primevue/password';
import Button from 'primevue/button';
import Toast from 'primevue/toast';
import SpeedDial from 'primevue/speeddial';
import Dialog from 'primevue/dialog';
import InputSwitch from 'primevue/inputswitch';
import InputText from 'primevue/inputtext';
import router from '@/plugins/router'
import store from '@/plugins/store'

import { ref, watch, onBeforeMount, onUpdated } from 'vue';
import { useToast } from 'primevue/usetoast';

const valueKey = ref(null);
const noKey = ref(true);
const toast = useToast();
const visibleNewUserModal = ref(false);
const visibleNewPasswordModal = ref(false);
const visibleUserListModal = ref(false);
const visibleConfirmDelete = ref(false);
const visibleGuideModal = ref(false);
const visibleSettingsModal = ref(false);
const canRegister = ref(store.state.appConfig.enabled_registration);
const allUsers = ref(null);
const isCooldown = ref(false);
const cooldownDuration = 30000;
const remainingCooldown = ref(0);
const valueUsername = ref(null);
const valuePassword = ref(null);
const valuePasswordMatch = ref(null);
const valueNewPassword = ref(null);
const valueNewPasswordMatch = ref(null);
const deletionUserID = ref(null);
const newPasswordUserID = ref(null);


onBeforeMount(() => {
    allUsers.value = store.state.allUsers;
    canRegister.value = store.state.appConfig.enabled_registration;
})

onUpdated(() => {
    getUsers();
    getConfig();
    allUsers.value = store.state.allUsers;
    console.log('Component updated');
})

// ---------------------------------------------------------------------------------------------->>>>>>>>> //
// ---------------------------------------------------------------------------------------------->>>>>>>>> //
// ---------------------------------------------------------------------------------------------->>>>>>>>> //
async function newPassword() {
    if(valueNewPasswordMatch.value != null) {
    try {
        await store.dispatch('newPassword', {
        new_password: valueNewPasswordMatch.value,
        updating_user_id: newPasswordUserID.value,
      });
      visibleNewPasswordModal.value = false;
      toast.add({ severity: 'success', summary: 'Изменено', detail: 'Паролус от аккаунта успешно изменен', life: 3000 });
    } catch (error) {
        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Ошибка смены паролуса от аккаунта', life: 3000 });
    }} else {
        toast.add({ severity: 'info', summary: 'Ошибка', detail: 'Заполните поле нового паролуса', life: 3000 });
    }
}

async function deleteUser() {
    try {
        console.log(deletionUserID.value);
        await store.dispatch('deleteUser', { uid: deletionUserID.value });
        visibleConfirmDelete.value = false;
        toast.add({ severity: 'success', summary: 'Успешно', detail: 'Пользователь удален', life: 3000 });
    } catch (error) {
        deletionUserID.value = null;
        console.error('Error during deleting user:', error);
        visibleConfirmDelete.value = true;
        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Ошибка удаления пользователя', life: 3000 });
    }
}

async function getUsers() {
    await store.dispatch('getAllUsers');
}

async function getConfig() {
    await store.dispatch('getAppConfig');
}

watch(canRegister, async (newValue, oldValue) => {
  if (newValue !== oldValue) {
    try {
      await store.dispatch('changeConfig', {
        new_config: canRegister.value,
      });
      console.log('newValue !== oldValue');

      isCooldown.value = true;
      remainingCooldown.value = cooldownDuration / 1000;

      const cooldownInterval = setInterval(() => {
        remainingCooldown.value -= 1;
        if (remainingCooldown.value <= 0) {
          isCooldown.value = false;
          clearInterval(cooldownInterval);
        }
      }, 1000);

    } catch (error) {
      console.error('Error:', error);
    }
  }
});

async function register() {
    try {
        if (valuePassword.value == valuePasswordMatch.value && valuePassword.value != null) {
            await store.dispatch('register', {
                username: valueUsername.value,
                password: valuePassword.value
            });
            visibleNewUserModal.value = false;
            toast.add({ severity: 'success', summary: 'Успешно', detail: 'Новый пользователь создан', life: 3000 });
        } else {
            console.log('valuePassword.value != valuePasswordMatch.value');
            valueUsername.value = null;
            valuePassword.value = null;
            valuePasswordMatch.value = null;
            toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Паролусы не одинаковые', life: 3000 });
        }
    } catch (error) {
        console.error('Error during registration:', error);
        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Ошибка создания нового пользователя', life: 3000 });
    }
}

// ---------------------------------------------------------------------------------------------->>>>>>>>> //
// ---------------------------------------------------------------------------------------------->>>>>>>>> //
// ---------------------------------------------------------------------------------------------->>>>>>>>> //
const selectedTheme = ref({ name: 'Аквамариновый', code: 'teal' });

function switchTheme() {
    const themeLink = document.getElementById('theme-link');
    store.dispatch('updateTheme', selectedTheme.value)
    themeLink.href = '/themes/lara-light-' + selectedTheme.value.code + '/theme.css';
}

onBeforeMount(() => {
  const storedTheme = localStorage.getItem('theme');
  if (storedTheme) {
    selectedTheme.value = JSON.parse(storedTheme);
    switchTheme(selectedTheme.value);
  }
});

watch(selectedTheme, (newTheme) => {
  localStorage.setItem('theme', JSON.stringify(newTheme));
  switchTheme(newTheme);
});

// ---------------------------------------------------------------------------------------------->>>>>>>>> //
// ---------------------------------------------------------------------------------------------->>>>>>>>> //
// ---------------------------------------------------------------------------------------------->>>>>>>>> //
function toAuth() {
    router.push('/');
}

function enterAdmin() {
    if (valueKey.value != 'QS9yFNjn') {
        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Ошибка входа в панель администратора', life: 3000 });
    } else {
        console.log('Admin panel entered');
        valueKey.value = '';
        noKey.value = false;
        toast.add({ severity: 'success', summary: 'Успешно', detail: 'Вы вошли в панель администратора', life: 3000 });
    }
}

// ---------------------------------------------------------------------------------------------->>>>>>>>> //
// ---------------------------------------------------------------------------------------------->>>>>>>>> //
// ---------------------------------------------------------------------------------------------->>>>>>>>> //
function openVisibleDeletionModal(user) {
    visibleUserListModal.value = false;
    visibleConfirmDelete.value = true;
    deletionUserID.value = user.id;
}

function openVisibleNewPasswordModal(user) {
    visibleUserListModal.value = false;
    visibleNewPasswordModal.value = true;
    newPasswordUserID.value = user.id;
}

function closeConfirm() {
    visibleConfirmDelete.value = false;
    deletionUserID.value = null;
    toast.add({ severity: 'info', summary: 'Отменено', detail: 'Действие отменено', life: 3000 });
}

// ---------------------------------------------------------------------------------------------->>>>>>>>> //
// ---------------------------------------------------------------------------------------------->>>>>>>>> //
// ---------------------------------------------------------------------------------------------->>>>>>>>> //
const links = ref([
    {
        label: 'Guide',
        icon: 'pi pi-book',
        command: () => {
            visibleGuideModal.value = true;;
        }
    },
    {
        label: 'Settings',
        icon: 'pi pi-cog',
        command: () => {
            visibleSettingsModal.value = true;
        }
    },
    {
        label: 'Exit',
        icon: 'pi pi-sign-out',
        command: () => {
            noKey.value = true;
            router.push('/admin');
        }
    },
    {
        label: 'Userlist',
        icon: 'pi pi-users',
        command: () => {
            visibleUserListModal.value = true;
        }
    },
    {
        label: 'NewUser',
        icon: 'pi pi-user-plus',
        command: () => {
            visibleNewUserModal.value = true;
            valueUsername.value = null;
            valuePassword.value = null;
        }
    }
])
</script>
<style scoped lang="css">
.Form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.title {
    color: var(--primary-color);
    margin: 0 0 0 0;
}
.Form:deep(input) {
    margin: 1rem;
}
.Form:deep(button) {
    margin: 1rem;
}
.Form p {
    cursor: pointer;
}

.Form p:hover {
    color: var(--primary-color);

    transition: 0.3s ease-in-out;
}
.FormNewUser {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 1rem;
}
.FormNewUser:deep(input) {
    width: 220px;
}
.FormNewUser:deep(small) {
    margin: 0.5rem 0 1rem 0;
}
.oneUser {
    margin: 0 0 1rem 0;
    padding: 1rem;
    border: 2px solid var(--primary-color);
    border-radius: 1rem;
}
.oneUser:deep(i:hover) {
    cursor: pointer;
    color: var(--primary-color);

    transition: 0.3s ease-in-out;
}
.oneUser:deep(i) {
    margin-right: 8px;
}
.confirmButtons:deep(button) {
    margin: 0 1rem 0 0;
}
section:deep(.dial) {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
section:deep(a) {
    text-decoration: none;
}
</style>